<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>用户注册</title>
  <link rel="stylesheet" href="./css/default.css">

  <style>
    .zc {
      display: flex;
      position: relative;
      top: 40px;
      flex-direction: column;
      align-items: center;
      margin: 80px auto;
      padding: 20px;
      width: 400px;
      height: 400px;
      border: 1px solid #f2f2f2;
      box-shadow: 1px 3px 10px 3px rgba(217, 215, 215, 0.5);
      box-sizing: border-box;
      background-color: #fff;
    }

    .zc h2 {
      line-height: 36px;
      font-size: 24px;
      font-weight: 600;
      margin-bottom: 40px;
    }

    .information {
      width: 320px;
    }

    .information div {
      display: flex;
      flex-direction: column;
    }

    .information div:nth-child(4) {
      height: 44px;
    }

    .information span {
      font-size: 14px;
      margin-bottom: 15px;
      line-height: 14px;
      font-weight: 600;
    }

    .information input {
      height: 40px;
      padding: 0 10px;
      margin-bottom: 20px;
      border-radius: 2px;
      border: 1px solid rgb(229, 229, 229);
      outline: none;
    }

    .information input:focus {
      border: 1px solid #3F84FF;
    }

    .information input::-webkit-input-placeholder {
      color: rgb(170, 178, 189, 0.7);
      font-size: 14px;
    }

    .submit {
      width: 90%;
      height: 44px;
      background: #3B82FF;
      border-radius: 2px;
      color: #fff;
      font-size: 16px;
      text-align: center;
      cursor: pointer;
    }



    .information div:nth-child(3) span {
      color: rgb(255, 0, 0);
      font-size: 14px;
      font-weight: 400;
    }
  </style>
</head>

<body>
  <!-- 注册信息 -->
  <div class="zc">
    <form action="">

      <h2>管理员登录</h2>
      <div class="information">

        <div>
          <span class="span">账号</span>
          <input type="text" id="newUname" placeholder="请输入账号" class="input">
        </div>

        <div>
          <span class="span">密码</span>
          <input type="password" id="newPw" placeholder="请输入密码" class="input">
        </div>

        <div><span></span></div>

      </div>

      <input type="submit" value="登录" class="submit">

    </form>

  </div>

  <script>
    // 登录验证
    // 1.1 得到用户输入
    const newAccount = document.querySelector('#newUname')
    const newPw = document.querySelector('#newPw')
    const span = document.querySelector('.information div:nth-child(3) span')
    const form = document.querySelector('form')

    // 1.2 验证用户名输入
    newAccount.addEventListener('change', verifyAccount)
    // 封装函数
    function verifyAccount() {
      const reg = /^[a-zA-Z0-9_]{6,10}$/
      if (!reg.test(newAccount.value)) {
        span.innerHTML = '账号输入错误'
        return false
      }

      span.innerHTML = ''
      return true
    }

    // 1.3 验证密码输入
    newPw.addEventListener('change', verifyPw)
    // 封装函数
    function verifyPw() {
      const reg = /^[a-zA-Z0-9-_]{6,20}$/
      if (!reg.test(newPw.value)) {
        span.innerHTML = '密码输入错误'
        return false
      }

      span.innerHTML = ''
      return true
    }

    // 2. 登录
    const administrators = JSON.parse(localStorage.getItem('administrators')) || []
    console.log(administrators)

    form.addEventListener('submit', function (e) {
      e.preventDefault()
      const result = administrators.some(function (administrators) {
        // 验证返回值全为ture，则对比数据
        if (verifyAccount() && verifyPw()) {
          // 用户输入值与本地数据比对
          return administrators.account === newAccount.value && administrators.pw === newPw.value
        }
      })

      if (result) {
        alert('登录成功')
        location.href = './manage.html'
      }
    })
  </script>
</body>

</html>